<template>
  <div class="contain">
    <headtool :show="show" #right>
      <el-button size="mini" type="primary" @click="$router.push('/excel')">导入</el-button>
      <el-button size="mini" type="primary" @click="dialogShow = true"
        ><i class="el-icon-plus"></i> 新增员工</el-button
      >
    </headtool>

    <!-- 内容 -->
    <el-card class="card">
      <el-table :data="tableData" class="table">
        <el-table-column fixed label="序号" type="index"> </el-table-column>
        <el-table-column prop="username" width="200px" label="姓名">
        </el-table-column>
        <el-table-column prop="mobile" width="200px" label="手机号">
        </el-table-column>
        <el-table-column prop="workNumber" width="200px" label="工号">
        </el-table-column>
        <el-table-column prop="formOfEmployment" width="200px" label="聘用形势">
          <template slot-scope="{ row }">
            {{ row.formOfEmployment | myEmployees }}
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" width="200px" label="部门">
        </el-table-column>
        <el-table-column prop="correctionTime" width="200px" label="入职时间">
        </el-table-column>
        <el-table-column prop="formOfEmployment" width="200px" label="是否在职">
          <template>在职</template>
        </el-table-column>
        <el-table-column prop="enableState" width="200px" label="状态">
          <template>可用</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300px">
          <template slot-scope="{ row }">
            <el-button type="text" @click="toDetail(row.id)">查看</el-button>
            <el-button type="text" @click="openEdit(row)">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button type="text">角色</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pagesizes"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <myDialog :item="item" :dialogShow="dialogShow" @closedialog="dialogShow=false" @refresh="getEmployeesList"></myDialog>
  </div>
</template>

<script>
import { getEmployeesListApi } from '@/api/employees'
import myDialog from './component/dialog.vue'

export default {
  created () {
    this.getEmployeesList()
  },
  components:{myDialog},
  data () {
    return {
      show: false,
      tableData: [],
      currentPage: 1,
      pagesizes: [8, 16, 24, 32],
      pagesize: 8,
      total: 0,
      item: {},
      dialogShow: false,
    }
  },
  methods: {
    async getEmployeesList () {
      let res = await getEmployeesListApi({
        page: this.currentPage,
        size: this.pagesize
      })
      // console.log(res)
      // console.log(this)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    async handleSizeChange (val) {
      this.pagesize = val
      await this.getEmployeesList()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getEmployeesList()
    },
    openAdd(){

    },
    openEdit(row){
    },
    toDetail(id){
      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.contain {
  padding: 30px;
  .card {
    margin-top: 30px;
    .table {
      margin-bottom: 30px;
    }
  }
}
</style>
